Add some whimsical fun with an easter egg - #13152

Description

Adds an admin easter egg behind the command palette, picking up the Matrix scene WordPress used to play when you compared a revision to itself. That one shipped for about a decade and came out in [24820] (see #24852) when the revisions UI was rewritten and its doorway disappeared.

The command palette is the new doorway. No command is registered: a registered command shows up in the results the moment its phrase matches, which hands the egg to anyone who happens to type near it. Instead a keydown handler watches for Enter while the palette is open and acts on the phrase itself. The palette shows its ordinary "No results found." state throughout, so typing the phrase looks exactly like a search that missed.

That empty state is also the condition. The palette's search field is a combobox, so while any command matches, one of them is the active option and Enter belongs to it - the handler checks aria-activedescendant and stands down whenever the palette has something to run. Without that check, a post that happened to be titled with the phrase could never be opened from the palette, which @sabernhardt hit in https://core.trac.wordpress.org/ticket/65907#comment:5.

The phrase is compared through the same Dvorak/QWERTY substitution cipher the original used, so it is not a readable string in the admin bundle. It can be worked out from the source with a little effort, which seems like about the right amount.

The two files are named for what they do - teletype.js and teletype-loader.js - rather than for what they are. The loader is enqueued by name on every admin screen with the palette, so its src is right there in the markup, and a filename with "easter egg" in it gives away most of the fun before anyone goes looking. The docblocks still say plainly what this is; minification strips them, so they never reach a production page.

Trac ticket: https://core.trac.wordpress.org/ticket/65907

What changed after feedback on the ticket

@sabernhardt made a strong case that a faithful restoration lands badly, and most of it is addressed here:

• The self-destruct countdown is gone. The site now announces a routine maintenance cycle and counts down to the Matrix instead, so nobody watching has reason to think they have been hacked.
• "Self-comparison detected." no longer describes how the egg is reached. It is "Self-reference detected." now, which was @swissspidy's suggestion in review.
• The closing line, "Don't let this happen again.", is dropped. The scene holds on the last Matrix line for a few seconds, then takes itself down and hands the admin page back.
• The Matrix act now actually looks like the Matrix. The original was green text on black and nothing else, so the falling glyph rain everyone pictures is drawn on a canvas behind the dialogue. It sits out a prefers-reduced-motion: reduce preference.
• There is a visible way out now: the blue pill-shaped Exit button, top right, present from the first frame. Escape and a click anywhere still work.
• The overlay carries lang="en", since the dialogue is English whatever the profile language is set to.
• Screen reader users get the egg rather than forty-five seconds of silence. See below.

Accessibility

The first version was aria-hidden end to end. That made the typing bearable, but it also meant a blind user pressed Enter and got nothing at all, while focus stayed on an admin page they could no longer see. Reworked:

• The overlay is a role="dialog" with aria-modal="true", labelled "A WordPress easter egg. Press Escape to leave." It takes focus when it opens and hands focus back to wherever it came from on the way out.
• The typing surface keeps aria-hidden, since a character at a time is not something anyone wants read to them. Each line is instead handed whole to a polite live region as it begins typing, so the narration keeps pace with the screen rather than trailing it.
• The rain is described once, when the lights go out: "The screen goes black. Green code rains down it." The canvas itself is aria-hidden.
• Tab is trapped on the Exit button, so nobody winds up tabbing an interface hidden behind the overlay.

Screenshots

Act one, before the lights go out:

The Matrix act, with the rain running behind the dialogue:

Notes on the payload

Staging and timings follow the original. A few things needed updating after twelve years:

• <blink> and text-decoration: blink are both gone from browsers. Replaced with a CSS @keyframes blink, plus a prefers-reduced-motion guard.
• The original took over the document, rewriting html/body CSS and stripping nodes out of the page's first <p>. The scene now renders into its own overlay and touches nothing on the admin page.
• The typed line and the rain canvas are both marked aria-hidden. Without that, text typed one character at a time lands in the accessibility tree one node at a time. The live region described above carries the dialogue instead.
• Scrolling is locked while the scene plays. Otherwise the page behind it stays scrollable and leaves a scrollbar strip down the side.

Only a small loader is added to admin pages. The scene itself is fetched at the moment it is invoked, so a normal admin load carries nothing else.

How has this been tested

1. Open any admin screen and press Cmd/Ctrl+K.
2. Type the phrase. The palette will say "No results found." the whole time, which is expected. Press Enter anyway.
3. The scene runs for about 45 seconds and then clears itself. Esc or a click dismisses it at any point.

Worth a reviewer's eye, since the handler runs in capture phase:

• Ordinary palette commands still run, including when the search text is the phrase itself. Publish a post titled with the phrase, search for it, and Enter should open the post rather than the egg.
• Enter on a genuinely empty search does nothing.
• The payload is not requested until the egg is invoked.
• No console errors on normal admin screens.

The scene itself was driven in a standalone harness rather than in wp-admin, which is where the screenshots above come from. Confirmed there:

• The rain canvas is created at the right moment, sized to the viewport, and the glyphs draw. No canvas is created at all when prefers-reduced-motion: reduce matches.
• The live region receives all nine lines, in order, as whole lines - the three of act one, the countdown, the rain description, and the three Matrix lines.
• Focus lands on the overlay when it opens and returns to the previously focused element on exit, whether the scene ends on its own or is dismissed with Escape.
• Tab moves to the Exit button and stays there.
• Scroll locking is undone and the injected style element is removed on every exit path.

The palette handler still wants a pass on a real admin screen, and the narration is worth hearing through an actual screen reader rather than trusting the live region contract.

grunt jshint:corejs, grunt typecheck:js, and phpcs on script-loader.php all pass on the current branch.

Types of changes

• Add the scene as src/js/_enqueues/admin/teletype.js, fetched on demand.
• Add the loader as src/js/_enqueues/admin/teletype-loader.js, enqueued with the command palette.
• Register and enqueue the loader in wp_enqueue_command_palette_assets().
• Add both files to the Gruntfile admin-js build map.
• Draw the falling glyph rain on a canvas during the Matrix act, skipped under reduced motion.
• Make the overlay a labelled modal dialog that manages focus, narrate whole lines through a live region, and add the Exit control.

AI Use

🤖 Claude Code wrote the code here and drafted this description, working from the discussion on the ticket. I will review and test.